﻿<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width">

		<title>HTML5 Player Framework - Advanced Fallback Examples</title>

		<link rel="stylesheet" href="//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/flick/jquery-ui.css">
		<link rel="stylesheet" href="../css/playerframework.min.css">
		<!--<link rel="stylesheet" href="../css/prettify.css">-->
		<link rel="stylesheet" href="../css/style.css">

		<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
		<script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"></script>
		<script src="../js/playerframework.min.js"></script>
		<!--<script src="../js/prettify.js"></script>-->

		<script>
			$(function()
			{
				$("#tabs").tabs();
				prettyPrint();

				var playerElements = PlayerFramework.getElementsByClass("pf-video").concat(PlayerFramework.getElementsByClass("pf-silverlight"));

				PlayerFramework.forEach(playerElements, function(element)
				{
					if (element.id)
						new PlayerFramework.Player(element);
				});
			});
		</script>
	</head>
	<body>
		<h1>HTML5 Player Framework</h1>
		<h2>Advanced Fallback Examples</h2>

		<div id="tabs" class="ui-tabs">

			<ul>
				<li><a href="#fallbackToSilverlightTab">Simulated Fallback to Silverlight from HTML5 Video</a></li>
				<li><a href="#fallbackToVideoTab">Simulated Fallback to HTML5 Video from Silverlight</a></li>
				<li><a href="#videoTab">HTML5 Video Only</a></li>
				<li><a href="#silverlightTab">Silverlight Only</a></li>
			</ul>
				
			<div id="fallbackToSilverlightTab" class="ui-tabs-hide">
				<div class="sample-player module ui-corner-all">
					<div class="module-label">Silverlight Player</div>
					<div class="module-contents">
						<video id="myVideo1" class="pf-video" width="480" height="320" controls="controls" poster="http://smf.blob.core.windows.net/samples/videos/bigbuck.png">
							<source src="http://smf.blob.core.windows.net/samples/videos/bigbuck.AAA" type='video/AAA' />
							<source src="http://smf.blob.core.windows.net/samples/videos/bigbuck.BBB" type='video/BBB' />
							<source src="http://smf.blob.core.windows.net/samples/videos/bigbuck.CCC" type='video/CCC' />
							<object class="pf-silverlight" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="480" height="320" data-poster="http://smf.blob.core.windows.net/samples/videos/bigbuck.png">
								<param name="source" value="http://smf.cloudapp.net/html5/xap/ProgressiveDownloadPlayer.xap" />
								<param name="onError" value="onSilverlightError" />
								<param name="onLoad" value="onSilverlightLoad" />
								<param name="minRuntimeVersion" value="5.0.61118.0" />
								<param name="autoUpgrade" value="false" />
								<param name="enableGPUAcceleration" value="true" />
								<param name="windowless" value="true" />
								<param name="InitParams" value="scriptablename=Player,autoplay=false,mediaurl=http://smf.cloudapp.net/html5/media/bigbuck.mp4" />
								<div class="pf-static">
									Silverlight is not installed or a later version is required.
								</div>
							</object>
						</video>
					</div>
				</div>

				<div class="snippets">
					<div class="module ui-corner-all">
						<div class="module-label">JavaScript</div>
						<div class="module-contents">
							<pre class="prettyprint lang-js"><code>var myPlayer = new PlayerFramework.Player("myVideo");</code></pre>
						</div>
					</div>

					<div class="module ui-corner-all">
						<div class="module-label">HTML</div>
						<div class="module-contents">
							<pre class="prettyprint">
<code>&lt;video id="myVideo" class="pf-video" width="480" height="320" controls="controls" poster="http://smf.blob.core.windows.net/samples/videos/bigbuck.png"&gt;
	&lt;source src="http://smf.blob.core.windows.net/samples/videos/bigbuck.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /&gt;
	&lt;source src="http://smf.blob.core.windows.net/samples/videos/bigbuck.webm" type='video/webm; codecs="vp8, vorbis"' /&gt;
	&lt;source src="http://smf.blob.core.windows.net/samples/videos/bigbuck.ogv" type='video/ogg; codecs="theora, vorbis"' /&gt;
	&lt;object class="pf-silverlight" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="480" height="320" data-poster="http://smf.blob.core.windows.net/samples/videos/bigbuck.png"&gt;
		&lt;param name="source" value="http://smf.cloudapp.net/html5/xap/ProgressiveDownloadPlayer.xap"/&gt;
		&lt;param name="onError" value="onSilverlightError" /&gt;
		&lt;param name="onLoad" value="onSilverlightLoad" /&gt;
		&lt;param name="minRuntimeVersion" value="5.0.61118.0" /&gt;
		&lt;param name="autoUpgrade" value="false" /&gt;
		&lt;param name="enableGPUAcceleration" value="true" /&gt;
		&lt;param name="windowless" value="true" /&gt;
		&lt;param name="InitParams" value="scriptablename=Player,autoplay=false,mediaurl=http://localhost/media/bigbuck.mp4"/&gt;
		&lt;div class="pf-static"&gt;
			Silverlight is not installed or a later version is required.
		&lt;/div&gt;
	&lt;/object&gt;
&lt;/video&gt;</code></pre>
						</div>
					</div>
				</div>
			</div>

			<div id="fallbackToVideoTab" class="ui-tabs-hide">
				<div class="sample-player module ui-corner-all">
					<div class="module-label">HTML5 Video Player</div>
					<div class="module-contents">
						<object id="myVideo2" class="pf-silverlight" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="480" height="320" data-poster="http://smf.blob.core.windows.net/samples/videos/bigbuck.png">
							<param name="source" value="http://smf.cloudapp.net/html5/xap/SmoothStreamingPlayer.xap" />
							<param name="onError" value="onSilverlightError" />
							<param name="onLoad" value="onSilverlightLoad" />
							<param name="minRuntimeVersion" value="99.0.00000.0" />
							<param name="autoUpgrade" value="false" />
							<param name="enableGPUAcceleration" value="true" />
							<param name="windowless" value="true" />
							<param name="InitParams" value="scriptablename=Player,autoplay=false,mediaurl=http://streams.smooth.vertigo.com/BigBuckBunny_30sec/bigbuck.ism/manifest" />
							<video class="pf-video" width="480" height="320" controls="controls" poster="http://smf.blob.core.windows.net/samples/videos/bigbuck.png">
								<source src="http://smf.blob.core.windows.net/samples/videos/bigbuck.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
								<source src="http://smf.blob.core.windows.net/samples/videos/bigbuck.webm" type='video/webm; codecs="vp8, vorbis"' />
								<source src="http://smf.blob.core.windows.net/samples/videos/bigbuck.ogv" type='video/ogg; codecs="theora, vorbis"' />
								<div class="pf-static">
									HTML5 video is not supported.
								</div>
							</video>
						</object>
					</div>
				</div>

				<div class="snippets">
					<div class="module ui-corner-all">
						<div class="module-label">JavaScript</div>
						<div class="module-contents">
							<pre class="prettyprint lang-js"><code>var myPlayer = new PlayerFramework.Player("myVideo");</code></pre>
						</div>
					</div>

					<div class="module ui-corner-all">
						<div class="module-label">HTML</div>
						<div class="module-contents">
							<pre class="prettyprint">
<code>&lt;object id="myVideo" class="pf-silverlight" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="480" height="320" data-poster="http://smf.blob.core.windows.net/samples/videos/bigbuck.png"&gt;
	&lt;param name="source" value="http://smf.cloudapp.net/html5/xap/SmoothStreamingPlayer.xap"/&gt;
	&lt;param name="onError" value="onSilverlightError" /&gt;
	&lt;param name="onLoad" value="onSilverlightLoad" /&gt;
	&lt;param name="minRuntimeVersion" value="5.0.61118.0" /&gt;
	&lt;param name="autoUpgrade" value="false" /&gt;
	&lt;param name="enableGPUAcceleration" value="true" /&gt;
	&lt;param name="windowless" value="true" /&gt;
	&lt;param name="InitParams" value="scriptablename=Player,autoplay=false,mediaurl=http://streams.smooth.vertigo.com/BigBuckBunny_30sec/bigbuck.ism/manifest"/&gt;
	&lt;video class="pf-video" width="480" height="320" controls="controls" poster="http://smf.blob.core.windows.net/samples/videos/bigbuck.png"&gt;
		&lt;source src="http://smf.blob.core.windows.net/samples/videos/bigbuck.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /&gt;
		&lt;source src="http://smf.blob.core.windows.net/samples/videos/bigbuck.webm" type='video/webm; codecs="vp8, vorbis"' /&gt;
		&lt;source src="http://smf.blob.core.windows.net/samples/videos/bigbuck.ogv" type='video/ogg; codecs="theora, vorbis"' /&gt;
		&lt;div class="pf-static"&gt;
			HTML5 video is not supported.
		&lt;/div&gt;
	&lt;/video&gt;
&lt;/object&gt;</code></pre>
						</div>
					</div>
				</div>
			</div>

			<div id="videoTab" class="ui-tabs-hide">
				<div class="sample-player module ui-corner-all">
					<div class="module-label">HTML5 Video Player</div>
					<div class="module-contents">
						<video id="myVideo3" class="pf-video" width="480" height="320" controls="controls" poster="http://smf.blob.core.windows.net/samples/videos/bigbuck.png">
							<source src="http://smf.blob.core.windows.net/samples/videos/bigbuck.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
							<source src="http://smf.blob.core.windows.net/samples/videos/bigbuck.webm" type='video/webm; codecs="vp8, vorbis"' />
							<source src="http://smf.blob.core.windows.net/samples/videos/bigbuck.ogv" type='video/ogg; codecs="theora, vorbis"' />
							<div class="pf-static">
								HTML5 video is not supported.
							</div>
						</video>
					</div>
				</div>

				<div class="snippets">
					<div class="module ui-corner-all">
						<div class="module-label">JavaScript</div>
						<div class="module-contents">
							<pre class="prettyprint lang-js"><code>var myPlayer = new PlayerFramework.Player("myVideo");</code></pre>
						</div>
					</div>

					<div class="module ui-corner-all">
						<div class="module-label">HTML</div>
						<div class="module-contents">
							<pre class="prettyprint">
<code>&lt;video id="myVideo" class="pf-video" width="480" height="320" controls="controls" poster="http://smf.blob.core.windows.net/samples/videos/bigbuck.png"&gt;
	&lt;source src="http://smf.blob.core.windows.net/samples/videos/bigbuck.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /&gt;
	&lt;source src="http://smf.blob.core.windows.net/samples/videos/bigbuck.webm" type='video/webm; codecs="vp8, vorbis"' /&gt;
	&lt;source src="http://smf.blob.core.windows.net/samples/videos/bigbuck.ogv" type='video/ogg; codecs="theora, vorbis"' /&gt;
	&lt;div class="pf-static"&gt;
		HTML5 video is not supported.
	&lt;/div&gt;
&lt;/video&gt;</code></pre>
						</div>
					</div>
				</div>
			</div>

			<div id="silverlightTab" class="ui-tabs-hide">
				<div class="sample-player module">
					<div class="module-label">Silverlight Player</div>
					<div class="module-contents">
						<object id="myVideo4" class="pf-silverlight" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="480" height="320" data-poster="http://smf.blob.core.windows.net/samples/videos/bigbuck.png">
							<param name="source" value="http://smf.cloudapp.net/html5/xap/SmoothStreamingPlayer.xap" />
							<param name="onError" value="onSilverlightError" />
							<param name="onLoad" value="onSilverlightLoad" />
							<param name="minRuntimeVersion" value="5.0.61118.0" />
							<param name="autoUpgrade" value="false" />
							<param name="enableGPUAcceleration" value="true" />
							<param name="windowless" value="true" />
							<param name="InitParams" value="scriptablename=Player,autoplay=false,mediaurl=http://streams.smooth.vertigo.com/BigBuckBunny_30sec/bigbuck.ism/manifest" />
							<div class="pf-static">
								Silverlight is not installed or a later version is required.
							</div>
						</object>
					</div>
				</div>

				<div class="snippets">
					<div class="module ui-corner-all">
						<div class="module-label">JavaScript</div>
						<div class="module-contents">
							<pre class="prettyprint lang-js"><code>var myPlayer = new PlayerFramework.Player("myVideo");</code></pre>
						</div>
					</div>

					<div class="module ui-corner-all">
						<div class="module-label">HTML</div>
						<div class="module-contents">
							<pre class="prettyprint">
<code>&lt;object id="myVideo" class="pf-silverlight" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="480" height="320" data-poster="http://smf.blob.core.windows.net/samples/videos/bigbuck.png"&gt;
	&lt;param name="source" value="http://smf.cloudapp.net/html5/xap/SmoothStreamingPlayer.xap"/&gt;
	&lt;param name="onError" value="onSilverlightError" /&gt;
	&lt;param name="onLoad" value="onSilverlightLoad" /&gt;
	&lt;param name="minRuntimeVersion" value="5.0.61118.0" /&gt;
	&lt;param name="autoUpgrade" value="false" /&gt;
	&lt;param name="enableGPUAcceleration" value="true" /&gt;
	&lt;param name="windowless" value="true" /&gt;
	&lt;param name="InitParams" value="scriptablename=Player,autoplay=false,mediaurl=http://streams.smooth.vertigo.com/BigBuckBunny_30sec/bigbuck.ism/manifest"/&gt;
	&lt;div class="pf-static"&gt;
		Silverlight is not installed or a later version is required.
	&lt;/div&gt;
&lt;/object&gt;</code></pre>
						</div>
					</div>
				</div>
			</div>

		</div>
	</body>
</html>